<template>
  <div class="whole wholeuser">
    <div class="crumbs">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">
          <span v-if="index + 1 < $route.matched.length">
            {{
              item.meta.title
            }}
          </span>
          <router-link
              v-if="index + 1 == $route.matched.length"
              :to="item.path"
          >{{ item.meta.title }}
          </router-link>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="addUser">
      <a-button v-if="addShow" :class="butAdmin" class="userAbut" type="primary" @click="addUser">+ 添加用户</a-button>
    </div>
    <a-table
        :class="TableAdmin"
        :columns="columns"
        :data-source="data1"
        :pagination="pagination"
        class="userTable"
        rowKey="id"
    >
      <span slot="num" slot-scope="text, record, index">
        {{
          (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1
        }}
      </span>
      <template slot="operations" slot-scope="text, record">
        <div class="editable-row-operations">
          <span v-if="delShow && record['id'] !== '1'">
            <a-popconfirm v-if="data1.length" title="确认删除?" @confirm="() => Delete(record.id)">
              <a href="javascript:;" title="删除">
                <a-icon style="color: red; fontsize: 16px" type="delete"/>
              </a>
            </a-popconfirm>
          </span>
          <span class="jiange"></span>
          <span v-if="editShow">
            <a title="编辑" @click="edit(record.id)">
              <a-icon style="color: #7a7d7e; fontsize: 16px" type="edit"/>
            </a>
          </span>
        </div>
      </template>
    </a-table>
    <div v-show="Loading" class="Loading">
      <a-spin tip="Loading..."></a-spin>
    </div>

    <!-- 添加 -->
    <div ref="aModalUser" class="aModalUser">
      <a-modal
          v-model="addVisible"
          :getContainer="()=>$refs.aModalUser"
          :mask="false"
          :maskClosable="false"
          centered
          title="添加用户"
      >
        <template slot="footer">
          <a-button :class="TableButSave" class="butSave" @click="closeaddUser">添加</a-button>
          <a-button :class="TableButReset" class="butReset" @click="addReturnReset">重置</a-button>
        </template>
        <a-form :form="form" class="addForm" hideRequiredMark>
          <div class="surName">
            <a-form-item class="surNameItem" label="账号" v-bind="formItemLayout">
              <a-input
                  v-decorator="[
              'userName',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入账号',
                  },
                ],
              },
            ]"
                  class="surNameItemInp"
              />
            </a-form-item>
            <a-form-item class="surNameItem" label="密码" v-bind="formItemLayout">
              <a-input
                  v-decorator="[
              'password',
              {
                rules: [
                  {
                    min: 6,
                    required: true,
                    message: '密码最少6位',
                  },
                ],
              },
            ]"
                  class="surNameItemInp"
                  type="password"
              />
            </a-form-item>
          </div>

          <div class="surName">
            <a-form-item class="surNameItem" label="姓" v-bind="formItemLayout">
              <a-input
                  v-decorator="[
              'surname',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入姓',
                  },
                ],
              },
            ]"
                  class="surNameItemInp"
              />
            </a-form-item>
            <a-form-item class="surNameItem" label="名" v-bind="formItemLayout">
              <a-input
                  v-decorator="[
              'name',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入名',
                  },
                ],
              },
            ]"
                  class="surNameItemInp"
              />
            </a-form-item>
          </div>
          <div class="rolesUserForm">
            <a-form-item class="userFormItem" label="用户编号" v-bind="formItemLayout">
              <a-input v-decorator="['userNum', { rules: [ { max: 20, min: 6, required: true, message: '用户编号应为6-20位之间' } ] }]" />
            </a-form-item>
          </div>

          <div class="rolesUserForm">
            <a-form-item class="userFormItem" label="角色" v-bind="formItemLayout">
              <a-select
                  v-decorator="[
              'roles',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择角色',
                  },
                ],
              },
            ]"
                  class="userFormItemSele"
                  mode="multiple"
                  @change="handleChange"
              >
                <a-select-option v-for="item in RoleInfo" :key="item.id">
                  {{
                    item.roleName
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>

          <div class="radioSurName">
            <a-form-item class="userRadio" label="性别" v-bind="formItemLayout">
              <a-radio-group
                  v-decorator="[
              'sex',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择性别',
                  },
                ],
              },
            ]"
                  class="sex"
              >
                <a-radio :value="0">男</a-radio>
                <a-radio :value="1">女</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item class="UserTime" label="生日" v-bind="formItemLayout">
              <a-date-picker
                  v-decorator="[
              'birthday',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择生日',
                  },
                ],
              },
            ]"
                  class="birthday"
                  placeholder="请选择"
                  @change="onChange"
              />
            </a-form-item>
          </div>

          <div class="rolesUserForm" style="margin-top: 5px">
            <a-form-item class="userFormItem" label="备注" v-bind="formItemLayout">
              <a-textarea
                  v-decorator="[
              'remark'
            ]"
                  class="userFormItemArea"
              />
            </a-form-item>
          </div>
        </a-form>
      </a-modal>
    </div>

    <!-- 编辑 -->
    <div ref="aModalUser1" class="aModalUser1">
      <a-modal
          v-model="editVisible"
          :getContainer="()=>$refs.aModalUser1"
          :mask="false"
          :maskClosable="false"
          centered
          title="编辑用户"
      >
        <template slot="footer">
          <a-button :class="TableButSave" class="butSave" @click="closeEditUser">提交</a-button>
          <a-button :class="TableButReset" class="butReset" @click="addReturnReset">重置</a-button>
        </template>
        <a-form :form="form" class="addForm" hideRequiredMark>
          <div class="rolesUserForm">
            <a-form-item class="surNameItem userFormItem" label="账号" v-bind="formItemLayout">
              <a-input
                  v-decorator="[
              'userName',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入账号',
                  },
                ],
              },
            ]"
                  class="surNameItemInp"
              />
            </a-form-item>
          </div>
          <div class="surName">
            <a-form-item class="surNameItem" label="姓" v-bind="formItemLayout">
              <a-input
                  v-decorator="[
              'surname',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入姓',
                  },
                ],
              },
            ]"
                  class="surNameItemInp"
              />
            </a-form-item>
            <a-form-item class="surNameItem" label="名" v-bind="formItemLayout">
              <a-input
                  v-decorator="[
              'name',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入名',
                  },
                ],
              },
            ]"
                  class="surNameItemInp"
              />
            </a-form-item>
          </div>

          <div class="rolesUserForm">
            <a-form-item class="userNumItem userFormItem" label="用户编号" v-bind="formItemLayout">
              <a-input
                  v-decorator="[
              'userNum',
              {
                rules: [
                  {
                    required: true,
                    max: 20,
                    min: 6,
                    message: '用户编号应为6-20位之间',
                  },
                ],
              },
            ]"
                  class="surNameItemInp"
              />
            </a-form-item>
          </div>

          <div class="rolesUserForm">
            <a-form-item class="userFormItem" label="角色" v-bind="formItemLayout">
              <a-select
                  v-decorator="[
              'roles',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择角色',
                  },
                ],
              },
            ]"
                  class="userFormItemSele"
                  mode="multiple"
                  @change="handleChange"
              >
                <a-select-option v-for="item in RoleInfo" :key="item.id">
                  {{
                    item.roleName
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>

          <div class="radioSurName">
            <a-form-item class="userRadio" label="性别" v-bind="formItemLayout">
              <a-radio-group
                  v-decorator="[
              'sex',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择性别',
                  },
                ],
              },
            ]"
                  class="sex"
              >
                <a-radio :value="0">男</a-radio>
                <a-radio :value="1">女</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item class="UserTime" label="生日" v-bind="formItemLayout">
              <a-date-picker
                  v-decorator="[
              'birthday',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择生日',
                  },
                ],
              },
            ]"
                  class="birthday"
                  placeholder="请选择"
                  @change="onChange"
              />
            </a-form-item>
          </div>

          <div class="rolesUserForm" style="margin-top: 5px">
            <a-form-item class="userFormItem" label="备注" v-bind="formItemLayout">
              <a-textarea
                  v-decorator="[
              'remark'
            ]"
                  class="userFormItemArea"
              />
            </a-form-item>
          </div>
        </a-form>
      </a-modal>
    </div>

  </div>
</template>

<script>
import api from "../../api/userManagement/userManagement.js";
import roleApi from "../../api/roleManagement/roleManagement.js"
import moment from "moment";

export default {
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          scopedSlots: {customRender: "num"},
          width: 78
        },
        {
          title: "用户编号",
          dataIndex: "userNum",
          scopedSlots: {customRender: "userNum"},
          width: 100
        },
        {
          title: "用户名",
          dataIndex: "userName",
          scopedSlots: {customRender: "userName"},
          width: 100
        },
        {
          title: "真实姓名",
          dataIndex: "nickName",
          scopedSlots: {customRender: "nickName"},
          width: 100
        },
        {
          title: "角色",
          dataIndex: "roleNames",
          scopedSlots: {customRender: "roleNames"},
          width: 100
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          scopedSlots: {customRender: "createTime"},
          customRender: (text, row, index) => {
            return moment(text).format("YYYY-MM-DD HH:mm:ss");
          },
          width: 100
        },
        {
          title: "操作",
          dataIndex: "operations",
          scopedSlots: {customRender: "operations"},
          width: 78
        }
      ],
      Loading: false,
      data1: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        pageSizeOptions: ["5", "10", "15", "20"],
        onShowSizeChange: current => this.onSizeChange(current),
        onChange: (current, pageSize) => this.onPageChange(current, pageSize)
      },
      addShow: false,
      delShow: false,
      editShow: false,
      visible: false,
      confirmLoading: false,
      addVisible: false,
      editVisible: false,
      RoleInfo: [],
      birthday: "",
      userId1: '',
      formItemLayout: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 8},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
      TableAdmin: 'TableAdmin',
      butAdmin: 'butAdmin',
      TableButSave: 'TableButSave',
      TableButReset: 'TableButReset',
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {name: "register"});
  },
  created() {
    // this.getUserInfo();
    this.getRoleInfo();
    this.getUserInfo();
    // let userInfo = this.$store.state.userInfo;
    let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    this.isShow(userInfo);
  },
  mounted() {
    let _this = this;
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.TableAdmin = 'TableAdmin';
        _this.butAdmin = 'butAdmin';
        _this.TableButSave = 'TableButSave';
        _this.TableButReset = 'TableButReset';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.TableAdmin = 'TableAdmin1';
        _this.butAdmin = 'butAdmin1';
        _this.TableButSave = 'TableButSave1';
        _this.TableButReset = 'TableButReset1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.TableAdmin = 'TableAdmin';
      _this.butAdmin = 'butAdmin';
      _this.TableButSave = 'TableButSave';
      _this.TableButReset = 'TableButReset';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.TableAdmin = 'TableAdmin1';
      _this.butAdmin = 'butAdmin1';
      _this.TableButSave = 'TableButSave1';
      _this.TableButReset = 'TableButReset1';
    }
  },

  methods: {
    isShow(userInfo) {
      if (userInfo.permissions.includes("cf:sys:user:add")) {
        this.addShow = true;
      }
      if (userInfo.permissions.includes("cf:sys:user:remove")) {
        this.delShow = true;
      }
      if (userInfo.permissions.includes("cf:sys:user:edit")) {
        this.editShow = true;
      }
    },
    // onChange(pageNumber) {
    //   console.log("Page: ", pageNumber);
    // },
    onPageChange(current, pageSize) {
      this.pagination.current = current;
      this.pagination.pageSize = pageSize;
      this.getUserInfo()
    },
    getUserInfo() {
      let _this = this;
      _this.Loading = true;
      let pageNum = _this.pagination.current;
      let pageSize = _this.pagination.pageSize;
      api.userGetList({pageNum: pageNum, pageSize: pageSize}).then(res => {
        _this.Loading = false;
        if (res.code == 200) {
          _this.pagination.total = res.data.totalCount;
          _this.data1 = res.data.data;
        }
      });
    },
    getUserDetailsInfo(userId1) {
      let _this = this;
      api.userGetInfo(null, userId1).then(res => {
        console.log(res)
        _this.$nextTick(() => {
          _this.form.setFieldsValue({
            sex: res.data.sex,
            userName: res.data.userName,
            userNum: res.data.userNum,
            remark: res.data.remark,
            surname: res.data.surname,
            name: res.data.name,
            birthday: res.data.birthday,
            roles: res.data.roles
          });
        })
      })
    },
    // 添加用户
    addUser() {
      this.form.resetFields();
      this.addVisible = true;
    },
    closeaddUser() {
      let _this = this;
      _this.form.validateFieldsAndScroll((err, values) => {
        values.birthday = _this.birthday;
        if (!err) {
          console.log("Received values of form: ", values);
          api.userAdd(null, values).then(res => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              _this.addVisible = false;
              // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
              this.getUserInfo();
            } else {
              this.$message.success("添加失败");
              _this.addVisible = false;
              // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
              this.getUserInfo();
            }
          })
        }
      });
    },
    // 删除
    Delete(userId) {
      console.log(userId);
      let _this = this;
      api.userRemove(null, userId).then(res => {
        if (res.code == 200 && res.data == true) {
          this.$message.success("删除成功");
          this.getUserInfo();
        } else {
          this.$message.error("删除失败");
          this.getUserInfo();
        }
      });
    },
    // 编辑
    edit(userId1) {
      this.editVisible = true;
      this.userId1 = userId1;
      this.getUserDetailsInfo(userId1);
    },
    closeEditUser() {
      let _this = this;
      _this.form.validateFieldsAndScroll((err, values) => {
        if (_this.birthday != "") {
          values.birthday = _this.birthday;
        }
        values.id = _this.userId1;
        if (!err) {
          console.log("Received values of form: ", values);
          api.userEdit(null, values).then(res => {
            if (res.code == 200) {
              this.$message.success("编辑成功");
              _this.editVisible = false;
              // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
              _this.getUserInfo();
            } else {
              this.$message.error("编辑失败");
              _this.editVisible = false;
              // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
              _this.getUserInfo();
            }
          })
        }
      });
    },
    getRoleInfo() {
      let _this = this;
      roleApi.roleGetList().then(res => {
        if (res.code == 200) {
          _this.RoleInfo = res.data.data;
        }
        console.log(_this.RoleInfo);
      })
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    onChange(value, dateString) {
      this.birthday = dateString;
    },
    addReturnReset() {
      this.form.resetFields();
    },
  }
};
</script>

<style lang="scss" scoped>
.whole {
  position: relative;

  .Loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .crumbs {
    display: flex;
    padding-left: 31px;
    margin-top: 14px;

    a,
    area,
    button,
    [role="button"],
    input:not([type="range"]),
    label,
    select,
    summary,
    textarea,
    .ant-breadcrumb {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #4d4d4d;
    }

    .ant-breadcrumb > span:last-child a {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      letter-spacing: 0px;
      color: #1e7eff;
    }
  }

  .jiange {
    display: inline-block;
    width: 20px;
  }

  .rouView {
    position: absolute;
    left: 50%;
    transform: translate(-450px);
    top: 40px;
  }

  .userTable {
    margin-left: 25px;
    min-height: 562px;
    width: 1560px;
    background: #ffffff;
    border: 1px solid #c4d7e1;
    border-radius: 6px;
  }

  .addUser {
    width: 80%;
    display: flex;
    justify-content: flex-start;
    margin: 10px 0;
    margin-left: 30px;

    .userAbut {
      width: 120px;
      height: 36px;
      border-radius: 30px;
      background-color: #0078b5;
      font-size: 17px;
    }
  }

  .comAddUser {
    position: absolute;
    left: 10%;
    top: 20px;
  }

  .butSave {
    width: 94px;
    height: 30px;
    border-radius: 30px;
    background-color: #0078b5;
    font-size: 16px;
    color: #fff;
    margin-right: 40px;
  }

  .butSave1 {
    width: 94px;
    height: 30px;
    border-radius: 30px;
    background-color: #238cc3;
    font-size: 16px;
    color: #fff;
    margin-right: 40px;
  }

  .butReset {
    width: 94px;
    height: 30px;
    border-radius: 30px;
    font-size: 16px;
    color: #0376b7;
    border: 1px solid #0376b7;
  }

  .butReset1 {
    width: 94px;
    height: 30px;
    border-radius: 30px;
    font-size: 16px;
    color: #238cc3;
    border: 1px solid #238cc3;
  }

  .aModalUser {

    .addForm {
      width: 100%;
      height: 100%;
      position: relative;
      margin-left: 20px;

      .rolesUserForm {
        width: 100%;
        height: 55px;

        .userFormItem {
          width: 100%;

          .userFormItemArea {
            height: 200px;
          }
        }
      }

      .surName {
        display: flex;
        align-items: flex-start;
        width: 100%;
        height: 55px;

        .surNameItem:nth-child(1) {
          width: 100%;

          .surNameItemInp {
            width: 220px;
            height: 36px;
          }
        }

        .surNameItem:nth-child(2) {
          width: 100%;

          .surNameItemInp {
            width: 220px;
            height: 36px;
          }
        }
      }

      .radioSurName {
        width: 100%;
        height: 55px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: space-between;

        .UserTime {
          position: absolute;
          right: 40px;
          height: 36px;
          display: flex;
        }

        .userRadio {
          position: absolute;
          left: 0;
          display: flex;
        }

        .birthday {
          float: left;
          width: 220px;
          height: 36px;
        }

        .sex {
          width: 130px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }

  .aModalUser1 {
    .butSave {
      width: 94px;
      height: 30px;
      border-radius: 30px;
      background-color: #0078b5;
      font-size: 16px;
      color: #fff;
      margin-right: 40px;
    }

    .butReset {
      width: 94px;
      height: 30px;
      border-radius: 30px;
      font-size: 16px;
      color: #0376b7;
      border: 1px solid #0376b7;
    }

    .addForm {
      width: 100%;
      height: 100%;
      position: relative;
      margin-left: 20px;

      .rolesUserForm {
        width: 100%;
        height: 55px;

        .userFormItem {
          width: 100%;

          .userFormItemArea {
            height: 200px;
          }
        }
      }

      .surName {
        display: flex;
        align-items: flex-start;
        width: 100%;
        height: 55px;

        .surNameItem:nth-child(1) {
          width: 100%;

          .surNameItemInp {
            width: 220px;
            height: 36px;
          }
        }

        .surNameItem:nth-child(2) {
          width: 100%;

          .surNameItemInp {
            width: 220px;
            height: 36px;
          }
        }
      }

      .radioSurName {
        width: 100%;
        height: 55px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: space-between;

        .UserTime {
          position: absolute;
          right: 40px;
          height: 36px;
          display: flex;
        }

        .userRadio {
          position: absolute;
          left: 0;
          display: flex;
        }

        .birthday {
          float: left;
          width: 220px;
          height: 36px;
        }

        .sex {
          width: 130px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
<style>
.TableAdmin .ant-table-thead > tr > th .ant-table-header-column {
  color: #5a77b1;
}

.TableAdmin1 .ant-table-thead > tr > th .ant-table-header-column {
  color: #238cc3;
}

.TableAdmin .ant-table-thead > tr > th {
  background-color: #fff !important;
  border-bottom: 1px solid #5c78aa !important;
  color: #5a77b1 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.ant-table-thead > tr > th {
  background-color: #fff !important;
  border-bottom: 1px solid #5c78aa !important;
  color: #5a77b1 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.TableAdmin1 .ant-table-thead > tr > th {
  background-color: #fff !important;
  border-bottom: 1px solid #238cc3 !important;
  color: #238cc3 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.wholeuser .ant-spin-nested-loading {
  width: 1488px !important;
  margin: 0 auto;
}

.wholeuser .userTable {
  position: relative !important;
}

.wholeuser .ant-spin-nested-loading {
  position: static !important;
}

.wholeuser .ant-spin-container {
  position: static !important;
}

.wholeuser .ant-table-pagination.ant-pagination {
  position: absolute !important;
  bottom: -60px !important;
  right: 0 !important;
}

.ant-breadcrumb span:nth-child(1) .ant-breadcrumb-separator {
  display: none !important;
}

.aModalUser .ant-col-sm-8, .aModalUser1 .ant-col-sm-8 {
  display: flex !important;
  width: 50px !important;
}

.aModalUser .userFormItem .ant-col-sm-16, .aModalUser1 .userFormItem .ant-col-sm-16 {
  width: 560px !important;
}

.aModalUser .addForm .userRadio[data-v-049f7e8a], .aModalUser1 .addForm .userRadio[data-v-049f7e8a] {
  width: 30% !important;
}

.aModalUser .addForm .birthday[data-v-049f7e8a], .aModalUser1 .addForm .birthday[data-v-049f7e8a] {
  min-width: 220px !important;
}

.aModalUser textarea.ant-input, .aModalUser1 textarea.ant-input {
  max-width: none !important;
}

.aModalUser .has-error .ant-form-explain,
.has-error .ant-form-split, .aModalUser1 .has-error .ant-form-explain,
.has-error .ant-form-split {
  font-size: 14px !important;
}

.aModalUser .userRadio.ant-row.ant-form-item .ant-form-item-control, .aModalUser1 .userRadio.ant-row.ant-form-item .ant-form-item-control {
  margin-top: 10px !important;
}

.aModalUser .ant-form-item-label,
.aModalUser1 .ant-form-item-label {
  display: flex !important;
  width: 80px !important;
}

.aModalUser .ant-input,
.aModalUser1 .ant-input {
  height: 36px !important;
}

.aModalUser #register_remark, .aModalUser1 #register_remark {
  height: 200px !important;
}

.aModalUser .aFormItem.ant-row.ant-form-item,
.aModalUser1 .aFormItem.ant-row.ant-form-item {
  margin-bottom: 0 !important;
  height: 60px !important;
}

.aModalUser .radioStatus.ant-row.ant-form-item .ant-form-item-control,
.aModalUser1 .radioStatus.ant-row.ant-form-item .ant-form-item-control {
  margin-top: 10px !important;
}

.aModalUser .ant-modal-title,
.aModalUser1 .ant-modal-title {
  display: flex !important;
}

.aModalUser .ant-modal-content,
.aModalUser1 .ant-modal-content {
  width: 680px !important;
  height: 600px !important;
  box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6) !important;
  border-radius: 10px !important;
}

.aModalUser .ant-modal-body,
.aModalUser1 .ant-modal-body {
  padding: 0 !important;
  height: 480px !important;
  padding-top: 20px !important;
}

.aModalUser .addForm.ant-form.ant-form-horizontal.ant-form-hide-required-mark,
.aModalUser1 .addForm.ant-form.ant-form-horizontal.ant-form-hide-required-mark {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.butAdmin {
  background-color: #0078b5 !important;
}

.butAdmin1 {
  background-color: #238cc3 !important;
}

.TableButSave {
  width: 94px !important;
  height: 30px !important;
  border-radius: 30px !important;
  background-color: #0078b5 !important;
  font-size: 16px !important;
  color: #fff !important;
  margin-right: 40px !important;
}

.TableButSave1 {
  width: 94px !important;
  height: 30px !important;
  border-radius: 30px !important;
  background-color: #238cc3 !important;
  font-size: 16px !important;
  color: #fff !important;
  margin-right: 40px !important;
}

.TableButReset {
  width: 94px !important;
  height: 30px !important;
  border-radius: 30px !important;
  font-size: 16px !important;
  color: #0376b7 !important;
  border: 1px solid #0376b7 !important;
}

.TableButReset1 {
  width: 94px !important;
  height: 30px !important;
  border-radius: 30px !important;
  font-size: 16px !important;
  color: #238cc3 !important;
  border: 1px solid #238cc3 !important;
}
</style>
